@{
    ViewData["Title"] = "维修单管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">维修单管理</h3>
                </div>
                <div class="card-body">
                    <!-- 搜索区域 -->
                    <div class="layui-form layui-form-pane" id="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">维修单编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="repairCode" placeholder="请输入维修单编号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">维修单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="repairName" placeholder="请输入维修单名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">设备编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="deviceCode" placeholder="请输入设备编号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">设备名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="deviceName" placeholder="请输入设备名称" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">维修人员</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="repairPersonnel" placeholder="请输入维修人员" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">单据状态</label>
                                <div class="layui-input-inline">
                                    <select name="documentStatus">
                                        <option value="">全部</option>
                                        <option value="0">待维修</option>
                                        <option value="1">维修中</option>
                                        <option value="2">待验收</option>
                                        <option value="3">已完成</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>



                    <!-- 表格 -->
                    <table id="repairTable" lay-filter="repairTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="repairActionTpl">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态列模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.documentStatus == 0) { }}
        <span class="layui-badge layui-bg-orange">{{d.documentStatusText}}</span>
    {{# } else if(d.documentStatus == 1) { }}
        <span class="layui-badge layui-bg-blue">{{d.documentStatusText}}</span>
    {{# } else if(d.documentStatus == 2) { }}
        <span class="layui-badge layui-bg-cyan">{{d.documentStatusText}}</span>
    {{# } else if(d.documentStatus == 3) { }}
        <span class="layui-badge layui-bg-green">{{d.documentStatusText}}</span>
    {{# } else { }}
        <span class="layui-badge">{{d.documentStatusText}}</span>
    {{# } }}
</script>

<script src="~/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'laydate', 'jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.jquery;

        // 初始化表格
        table.render({
            elem: '#repairTable',
            url: '/Repair/GetList',
            method: 'POST',
            page: true,
            cols: [[
                {field: 'repairCode', title: '维修单编号', width: 150},
                {field: 'repairName', title: '维修单名称', width: 200},
                {field: 'deviceCode', title: '设备编号', width: 120},
                {field: 'deviceName', title: '设备名称', width: 150},
                {field: 'warrantyDate', title: '报修日期', width: 120, 
                 templet: function(d) {
                     return d.warrantyDate ? new Date(d.warrantyDate).toLocaleDateString() : '';
                 }
                },
                {field: 'repairDate', title: '维修日期', width: 120, 
                 templet: function(d) {
                     return d.repairDate ? new Date(d.repairDate).toLocaleDateString() : '';
                 }
                },
                {field: 'repairPersonnel', title: '维修人员', width: 100},
                {field: 'documentStatus', title: '状态', width: 100, templet: '#statusTpl'},
                {title: '操作', width: 200, align: 'center', templet: '#repairActionTpl'}
            ]],
            request: {
                pageName: 'page',
                limitName: 'maxResultCount'
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function(res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.count,
                    data: res.data
                };
            },
            before: function(req) {
                // 将page转换为skipCount
                if (req.page) {
                    req.skipCount = (req.page - 1) * (req.maxResultCount || 10);
                    delete req.page;
                }
                return req;
            }
        });

        // 搜索
        form.on('submit(search)', function(data){
            table.reload('repairTable', {
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });



        // 表格行工具事件
        table.on('tool(repairTable)', function(obj){
            var data = obj.data;

            if(obj.event === 'detail'){
                layer.open({
                    type: 2,
                    title: '查看维修单',
                    area: ['900px', '700px'],
                    content: '/Repair/Form?id=' + data.id + '&mode=detail'
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '编辑维修单',
                    area: ['900px', '700px'],
                    content: '/Repair/Edit?id=' + data.id,
                    end: function() {
                        table.reload('repairTable');
                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('确定删除这条记录吗？', function(index){
                    $.post('/Repair/DeleteRepair', {id: data.id}, function(res){
                        if(res.success){
                            layer.msg('删除成功');
                            table.reload('repairTable');
                        } else {
                            layer.msg('删除失败：' + res.message);
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>
</html> 